<template>
<div class="box" ref="containerRef" @scroll="handleScroll">
    <div class="content">
        <header>
            <a class="fl logo" href="https://wireai.com/" target="_blank">
                <img :src="`${shopurl}logo.png`" />
            </a>
            <nav>
                <span class="title" @click="toUrl('/')">
                    <i>WIRE AI</i>
                </span>
                <span class="title" @click="toUrl('/shop')">
                    <i>积分商城</i>
                </span>
                <span class="title active" @click="toUrl('/member')">
                    <i>个人中心</i>
                </span>
                <span class="title " @click="toUrl('/ranklist')">
                <i>积分助力榜</i>
                </span>
            </nav>
        </header>
        <div class="userInfo">
            <div class="info clearfix">
                <el-skeleton :loading="loading" animated v-if="isMember">	
                    <template #template>
                        <div class="user fl">
                            <div class="pic">
                                <el-skeleton-item variant="image" style="width: 64px; height: 64px; border-radius:50%;" />
                                <span class="sex show"></span>
                            </div>
                            <div class="cont">
                                <span class="icon">{{ memberInfo?.identity == '丝网买家' ? '买' : '企' }}</span>
                                <span class="name show">
                                    <el-skeleton-item variant="text" class="name show" style="width:120px;"/>
                                </span>
                                <span class="tell show">
                                    <el-skeleton-item variant="text" class="name show" style="width:150px;"/>
                                </span>
                                <span class="title show">
                                    <el-skeleton-item variant="text" class="name show" style="width:180px;"/>
                                </span>
                            </div>
                        </div>
                    </template>
                </el-skeleton>
            	<div class="user fl" v-else>
            		<div class="pic">
            		    <img v-if="memberInfo?.headimg" :src="`${baseurl}${memberInfo?.headimg}`"/>
            		    <img v-else :src="`${imgurl}pic.jpg`"/>
            		    <span class="sex show girl" v-if="memberInfo?.sex == '女'"></span>
			            <span class="sex show" v-else></span>
            		</div>
            		<div class="cont">
            		    <span class="icon">{{ memberInfo?.identity == '丝网买家' ? '买' : '企' }}</span>
            		    <span class="name show">{{ memberInfo?.nickname }}</span>
            		    <span class="tell show">{{ maskedPhone(memberInfo?.phone) }}</span>
            		    <span class="title show">{{ memberInfo?.companyname }}</span>
            		    <span class="btnEdit show" @click="toUrl('/perfect')">资料编辑</span>
            		</div>
            	</div>
               
            </div>
            <div class="fraction">
                <span class="tit-1 show mr">
                    <i>{{ memberInfo ? getArea(memberInfo?.integral) : 0 }}</i>积分
                </span>
                <span class="tit-1 show cur" @click="toUrl('/integral')">积分奖励说明 ></span>
            </div>
        </div>
        <div class="fractBox clearfix">
            <div class="title flexC">
                积分明细
                <span class="btnRule" @click="openRule">兑换规则</span>
            </div>
            
            <div class="fractList" v-if="list.length > 0">
                <div class="fractItem" v-for="(item,k) in list" :key="k">
                    <span class="tit show">{{ item.title }} <i v-if="item.num">（兑换数量：{{ item.num }}）</i></span>
                    <span class="time show">{{ item.addtime }}</span>
                    <span class="status show" v-if="item.status == 0 && item.type == 2">待处理</span>
                    <span class="status show lx" v-if="item.status == 1 && item.type == 2">处理中</span>
                    <span class="status show cl" v-if="item.status == 2 && item.type == 2">已完成</span>

                    <span class="num flexC min" v-if="item.type == 1">+ {{ item.grade }}</span>
                    <span class="num flexC " v-else>-{{ item.grade }}</span>

                </div>
            </div>
            <div class="fractList flexC" v-if="isNodata">暂无数据~~</div>
            <div class="fractList" element-loading-text="正在加载..." v-loading="loading" v-if="loading" >
			</div>
        </div>
    </div>
    <el-dialog v-model="visible" width="500">
        <template #header="{titleClass }">
            <h4 :class="titleClass">积分兑换规则</h4>
        </template>
        <div class="rule">
            用户可以使用积分兑换商城内的商品或服务类奖励，包括但不限于消费卡、生活用品、企业培训等。用户根据需求选择奖励，提交兑换申请，经由平台审核通过后，即兑换成功。客服拨打注册号码联系用户，与用户确认奖励领取方式（邮寄/自取），完成积分兑换服务。
        </div>
       
    </el-dialog>
</div>
</template>

<script setup lang='ts'>
    import { useUserStore } from "@/store/modules/user";
    import { useRouter,useRoute } from 'vue-router';
	import { getArea,maskedPhone } from '../../utils/base.ts';
    const baseurl = inject('$baseurl', null as any);
	const api = inject('$base', null as any);
    const userInfo = useUserStore();
    const router = useRouter();
    const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
    const shopurl = import.meta.env.VITE_APP_TITLE+'/assets/shop/';
    const memberInfo = ref<any>();
    const list = ref<any>([]);
    const page = ref<number>(1);
    const pagecount = ref<number>(0);
    const containerRef = ref(null);
    const isPage = ref<boolean>(false);
    const loading = ref(true);
    const isMember = ref(true);
    const isNodata = ref<boolean>(false);
    const visible = ref(false);
    function toUrl(url:string){
        router.push({ 
            path:url
        });
    }
    function memberinfo(){
        api.memberinfo({ id : userInfo.userIds }).then(res=>{
            memberInfo.value = res.data;
			isMember.value = false;
        })
    }
    function membergradelogList(){
        let data = {
            page : page.value,
            pagecount : 10,
            id : userInfo.userIds
        }
        api.membergradelog(data).then(res=>{
            let arr = res.data.list;
            loading.value = false;
            list.value = [...list.value,...arr];
            if(list.value.length == 0){
                isNodata.value = true;
            }
            pagecount.value = res.data.pagecount;
            if(res.data.pagecount > page.value*10){
                isPage.value = true;
            }else{
                isPage.value = false;
            }
        })
    }
    const handleScroll = () => {
		const container = containerRef.value;
		if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
			if(isPage.value){
                console.log('触底')
                loading.value = false;
				page.value++;
				membergradelogList();
			}
		}
    }
    function openRule(){
        visible.value = true;
    }
    onMounted(()=>{
        memberinfo();
        membergradelogList();
        setTimeout(()=>{
            let scrollTargetBox = document.querySelector('.fractList');
            scrollTargetBox.onscroll = (e) => {
                var scrollHeight = scrollTargetBox.scrollHeight; 
                var scrollTop = scrollTargetBox.scrollTop; 
                var clientHeight = scrollTargetBox.clientHeight; 
                console.log(scrollHeight,scrollTop,clientHeight,'高度')
                if (scrollHeight - clientHeight == scrollTop) {
                    if (list.value.length >= pagecount.value) return
                        page.value++;
                        membergradelogList()
                }
            }
        },500)
        
    })
</script>
<style lang="scss" scoped>
.box{
    background:url(../../assets/shop/bg.jpg) no-repeat top center #f6f9fd;
    background-size:100% auto;
    padding-bottom:80px;
    height:100vh;
    overflow-y:scroll;
}
header{
	width: 100%;
    padding:0 60px;
	height: 75px;
	margin: 0 auto;
	display: flex;
	align-items: center;
    .logo{
        cursor:pointer;
        display:inline-block;
        height:25px;
    }
	nav{
        padding: 0 15px;
        float:left;
        height:100%;
    }
    .title{
        font-size: 16px;
        padding: 0 15px;
        height: 100%;
        float: left;
        cursor: pointer;
        position: relative;
        i{
            font-style: normal;
            display: inline-block;
            height: 100%;
            position: relative;
            font-family: 'siyuanR';
            color: #d7e2f8;
            height: 100%;
            transition: all .5s;
            transform-origin: center;
            align-items: center;
            justify-content: center;
            display: flex;
            &::after{
                position: absolute;
                bottom: 8px;
                content: '';
                left: 50%;
                width: 0;
                height: 4px;
                background-image: linear-gradient(to right,#90e6ff, #9cfacd);
                border-radius: 4px;
                transition: all .5s;
            }
        }
        &.active{
            i{
                font-family: 'siyuanM';
                color:#ffffff;
                &:after{
                    width: 100%;
	                left: 0;
                }
            }
        }
        &:hover{
            i{
                color: #9cfacd;
            }
        }
    }
}
.content{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.userInfo{
    display:flex;
    justify-content:space-between;
    width:100%;
    font-family:'siyuanN';
    padding:40px 35px 35px 60px;
	.user{
		width: auto;
		display: flex;
	}
    .pic{
        width:70px;
        height:70px;
        border-radius:50%;
        background:rgba(255,255,255,.2);
        padding:3px;
        margin:0 20px 0 0;
        position:relative;
        .sex{
            background:url(../../assets/shop/sex.png) no-repeat;
            background-size:100%;
            width:18px;
            height:19px;
            position:absolute;
            right:0;
            bottom:5px;
            z-index:10;
            &.girl{
				background:url(../../assets/shop/girl.png) no-repeat;
            	background-size:100%;
			}
        }
        img{
            width:100%;
            height:100%;
            border-radius:50%;
            border:solid 1px #fff;
        }
    }
    .cont{
        color:#fff;
        padding-left:25px;
        position:relative;
        padding-top:10px;
        .icon{
            background:url(../../assets/shop/diamond.png) no-repeat;
            background-size:100%;
            width:18px;
            height:18px;
            position:absolute;
            left:0;
            font-size:8px;
            font-family:'siyuanR';
            text-align:center;
            line-height:14px;
            top:14px;
            padding-right:2px;
        }
        .name{
            font-size:18px;
            line-height:26px;
            font-family:'siyuanM';
        }
        .tell{
            font-size:15px;
            line-height:22px;
        }
        .title{
            font-size:15px;
            line-height:28px;
        }
        .btnEdit{
            background:url(../../assets/shop/btnEdit.png) no-repeat;
            background-size:100%;
            width:115px;
            height:35px;
            color:#000000;
            font-size:15px;
            text-align:center;
            line-height:35px;
            margin:8px 0 0 0;
			cursor: pointer;
        }
    }
    .fraction{
        color:#fff;
        .mr{
            margin-right:10px;
        }
        .tit-1{
            text-align:right;
            i{
                font-style:normal;
                font-size:36px;
                font-family:'DIN';
                font-weight:600;
                margin-right:3px;
            }
            font-size:15px;
            
        }
    }
}
.fractBox{
    width:100%;
    background:#fff;
    border-radius:6px;
    padding:0 40px 100px 40px;
    font-family:'siyuanR';
    .title{
        width:100%;
        height:100px;
        font-size:18px;
        color:#333333;
        position:relative;
        .btnRule{
            position:absolute;
            right:20px;
            color:#9094b0;
            font-size:14px;
            bottom:5px;
            cursor:pointer;
        }
    }
    .fractList{
        width:100%;
        min-height:200px;
        // height:auto;
        // overflow-y:scroll;
        .fractItem{
            padding:20px 250px 10px 25px;
            position:relative;
            border-bottom:solid 1px #dbe2ee;
            .tit{
                font-size:16px;
                color:#333333;
                line-height:20px;
                padding:4px 0;
                i{
                    color:#999;
                    font-size:12px;
                    font-style:normal;
                }
            }
            .time{
                font-size:14px;
                color:#9094b0;
                line-height:24px;
            }
            .status{
                position:absolute;
                right:150px;
                width:88px;
                padding:0 18px;
                border:20px;
                height:25px;
                font-size:14px;
                border-radius:25px;
                top:50%;
                transform:translateY(-50%);
                background:#fee8ea;
                color:#fb7279;
                line-height:25px;
                text-align:justify;
                text-align-last: justify;
                &.cl{
                    background:#e1fcfb;
                    color:#0ac3b9;
                }
                &.lx{
                    background:#e8f1fe;
                    color:#2379f7;
                }
            }
            .num{
                position:absolute;
                right:25px;
                top:50%;
                font-size:26px;
                font-family:'DIN';
                font-weight:600;
                color:#000000;
                transform:translateY(-50%);
                &.min{
                    color:#2379f7;
                }
            }
            
        }
    }
}

@media (max-width: 768px) {
	.box{
		background-size:1600px auto;
	}
	.userInfo{
		padding:30px;
		display: block;
		.cont{
			.btnEdit{
				margin: 8px 0;
			}
		}
		.logo{
			width: 100%;
			margin-bottom: 20px;
            cursor:pointer;
		}
		.pic{
			margin: 0 20px 0 0;
		}
		.fraction{
			width: 100%;
			.tit-1{
				text-align: left;
			}
		}
	}
	.fractBox{
		padding: 0 20px 60px 20px;
		.fractList {
			.fractItem{
				padding: 10px 150px 5px 0px;
				.num{
					right:0;
					font-size:18px;
				}
                .tit{
                    font-size:15px;
                }
                .status{
                    font-size:12px;
                    width:70px;
                    padding:0 12px;
                    right:60px;
                }
			}
		}
	}
    header{
        padding:0 0 0 20px;
        nav{
            padding:0 10px;
        }
        .title{
            padding:0 10px;
            font-size:14px;
        }
    }
    ::v-deep .el-dialog{
        width:90%;
    }
}
::v-deep .el-loading-spinner .path{
  stroke: #999;
}
::v-deep .el-loading-spinner .el-loading-text{
  color: #666;
}
::v-deep .el-message-box__title{
    color:#2379f7;
    font-family:'siyuanM';
}
::v-deep .el-dialog__header{
    padding:0 20px;
}
::v-deep .el-dialog__header .el-dialog__title{
    line-height:50px;
    margin:0;
}
::v-deep .el-dialog__body{
    padding:10px 20px 20px;
}
.rule{
    font-size:15px;
    line-height:30px;
    text-indent:2em;
}
</style>